<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>响应式视频浏览</title>
    <link rel="stylesheet" href="css/响应式视频.css" />
</head>

<body>
    <div class="banner">
        <div class="content">
            <img src="/images/美女1.jpg" alt="外国小姐姐" />
            <h2>Video Popup on Click | JavaScript</h2>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi quisquam
                inventore voluptates, dolorem hic velit expedita. Eligendi sint beatae
                explicabo doloremque incidunt ut quod. Ratione inventore laborum
                necessitatibus qui quibusdam.
            </p>
            <a onclick="toggle();">Watch Trailer</a>
        </div>
        <div class="trailer">
            <video src="D:/迅雷下载/Boot/public_Amusteven_Angelita.mp4" controls="true"></video>
            <span onclick="toggle();">&times;</span>
        </div>
    </div>
    <script type="text/javascript">
    function toggle() {
        var trailer = document.querySelector(".trailer");
        var video = document.querySelector("video");
        trailer.classList.toggle("active");
        video.currentTime = 0;
        video.pause();
    }
    </script>
</body>

</html>